<template>
    <div>

        <div style="height: 50px;">
            <el-button @click="Add">新增</el-button>
            <el-button @click="Upt">修改</el-button>
            <el-button @click="Del">删除</el-button>
            <el-button @click="Export">导出</el-button>
        </div>

        <!-- 查询条件 -->
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="发货申请编号">
                <el-input v-model="form.ShipNum" clearable />
            </el-form-item>
            <el-form-item label="发货申请主题">
                <el-input v-model="form.ShipTopic" clearable />
            </el-form-item>
            <el-form-item label="申请人">
                <el-input v-model="form.AppLyName" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetList()">查询</el-button>
            </el-form-item>
        </el-form>


        <!-- 列表 -->
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column prop="sraNumber" label="申请发货编号" align="center" width="200">
                <template v-slot="scoped">
                    <el-link type="primary" @click="GetDetails(scoped.row.pickingId)">{{ scoped.row.sraNumber
                        }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sprTopic" label="申请发货主题" align="center">
                <template v-slot="scoped">
                    <el-link type="primary" @click="GetDetails(scoped.row.pickingId)">{{ scoped.row.sprTopic
                        }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sraApplicant" label="申请人" align="center" />
            <el-table-column prop="sraDueDate" label="应发日期" align="center">
                <template v-slot="scope">
                    {{ scope.row.sraDueDate.substring(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="sraConsigner" label="发货人" align="center" />
            <el-table-column prop="name" label="客户/供应商" align="center" />
            <el-table-column>
                <template v-slot="scoped">
                    <el-button @click="FaHuo(scoped.row.shippRequestAppId)">
                        确认发货
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes"
                    :total="page.totalcount">
                    <span> , 每页 {{ page.pageSize }} 条，当前 {{ page.pageIndex }} / {{ page.pagecount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == page.pagecount"
                        @click="page.pageIndex = page.pagecount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import * as XLSX from 'xlsx';
import http from '../../../http.js'


const form = reactive({
    ShipNum: "",
    ShipTopic: '',
    AppLyName: ''
})

const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalcount: 0,
    pagecount: 0
})

const check = ref([])
const handleSelectionChange = (val: any) => {
    check.value = val
}

const GetDetails = (row: any) => {
    console.log(row)
    router.push("/UptShip?id=" + row)
}
const Add = () => {
    router.push("/AddShip")
}

const Upt = () => {
    var id = check.value.map((item: any) => item.shippRequestAppId)
    router.push("/UptShip?id=" + id)
}
const tableData = ref([])
const GetList = () => {
    axios.get(http.zblnb + "/erpck/api/Ship/GetShipApplyList", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            AppLyName: form.AppLyName,
            ShipTopic: form.ShipTopic,
            ShipNum: form.ShipNum
        }
    }).then(res => {
        console.log(res.data)
        tableData.value = res.data.data.list
        page.pagecount = res.data.data.pageCount
        page.totalcount = res.data.data.totalCount

    }).catch(err => {

    })
}

const Del = () => {
    if (check.value.length == 0) {
        return ElMessage("请选择要删除的记录")
    }
    ElMessageBox.confirm(
        '此操作将永久删除该记录, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let id = check.value.map((item: any) => item.shippRequestAppId)
        var model = {
            ids: id
        }

        axios.put(http.zblnb + "/erpck/api/Ship/DelShip", model).then(res => {
            if (res.data.data > 0) {
                ElMessage.success("删除成功")
                GetList()
            } else {
                ElMessage.error("删除失败")
            }
        })
    })
}


const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '申请发货编号', '申请发货主题', '申请人', '应发日期', '发货人', '供应商/客户']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.sraNumber,
                    item.sprTopic,
                    item.sraApplicant,
                    item.sraDueDate,
                    item.sraConsigner,
                    item.name,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '仓库发货') // 工作簿名称
            let name = '仓库发货' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}


onMounted(() => {
    GetList()
})


//发货确认
const FaHuo = (id: any) => {
    router.push({
        name:'AddDeliveryConfirmation',
        query: {
            id:id
        }
    })
}











</script>

<style scoped></style>